<template>
  <div>
    <top-bar title="选择话题" bgc="background-color:#fff"></top-bar>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell
          v-for="item in topicList"
          :key="item._id"
          :title="item.name"
          :label="item.introduce"
          @click="selectTopic(item)"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon v-if="joinTopic._id === item._id">
            <van-icon style="transform: translateY(20px);" size="20px" name="passed" />
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  computed: {
    ...mapState({
      joinTopic: state => state.joinTopic
    })
  },
  data() {
    return {
      topicList: [],
      pageSize: 10,
      pageNum: 1,
      loading: false,
      completed: false,
      isLoading: false,
      finished: false
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    joinTopic(v) {
      console.log(v);
    }
  },
  methods: {
    getList() {
      this.$api
        .get("/api/joinTopic/list", {
          params: { pageSize: this.pageSize, pageNum: this.pageNum }
        })
        .then(res => {
          this.topicList.push(...res.data.data.records);
          console.log(this.topicList);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getList();
    },
    // 下拉刷新
    pullDown() {
      this.pageNum = 1;
      this.topicList = [];
      this.completed = false;
      this.isLoading = true;
      this.getList();
    },
    selectTopic(item) {
      this.$store.commit("getJoinTopic", item);
      this.$router.go(-1);
    }
  }
};
</script>

<style>
</style>